﻿@page
@{ Layout = "_Layout"; }
@section Styles{
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
}
<div class="px-3">
    <div class="d-flex justify-content-between  align-items-center mb-3">
        <span>共：{{ paper.tmTotal }} 项，调查人次：{{ paper.answerTotal }}</span>
        <div>
            <el-button :size="euiSize" icon="el-icon-download" v-on:click="btnExportWordClick" plain>导出 Word</el-button>
        </div>
    </div>
    <el-row>
        <el-col>
            <div class="mb-3" v-for="(tm,tmIndex) in list">
                <el-card v-if="tm.parentId===0">
                    <div :id="'tm_'+tm.id">
                        <span class="mb-3 d-flex justify-content-start  align-items-start">
                            <span>{{ tm.tmIndex }}、</span>
                            <span>
                                （{{ tm.txName }}）
                            </span>
                            <span v-html="tm.title"></span>
                        </span>
                        <div class="list-group">
                            <div v-if="tm.tx==='Danxuanti'">
                                <div class="d-flex justify-content-start align-items-center">
                                    <div v-if="paper.answerTotal>0">
                                        <apexchart type="pie" :options="{labels:tm.optionsValues,legend:{show:false},colors:pieChartColors}" :series="tm.optionsAnswer" height="200"></apexchart>
                                    </div>
                                    <div class="w-100">
                                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                            <div class="d-flex justify-content-start align-items-start">
                                                <div style="width:150px;" v-if="paper.answerTotal>0">
                                                    <el-progress :stroke-width="18" :percentage="utils.formatPercentFloat(tm.optionsAnswer[optionIndex],tm.tmAnswerTotal)" :show-text="false" color="#67c23a"></el-progress>
                                                </div>
                                                <div class="mx-2">
                                                    {{optionsABC[optionIndex]}}.
                                                </div>
                                                <div>
                                                    <span v-html="option"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="tm.tx==='Duoxuanti'">
                                <div class="d-flex justify-content-start align-items-center">
                                    <div v-if="paper.answerTotal>0">
                                        <apexchart type="pie" :options="{labels:tm.optionsValues,legend:{show:false},colors:pieChartColors}" :series="tm.optionsAnswer" height="200"></apexchart>
                                    </div>
                                    <div class="w-100">
                                        <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.options">
                                            <div class="d-flex justify-content-start align-items-start">
                                                <div style="width:150px;" v-if="paper.answerTotal>0">
                                                    <el-progress :stroke-width="18" :percentage="utils.formatPercentFloat(tm.optionsAnswer[optionIndex],tm.tmAnswerTotal)" :show-text="false" color="#67c23a"></el-progress>
                                                </div>
                                                <div class="mx-2">
                                                    {{optionsABC[optionIndex]}}.
                                                </div>
                                                <div>
                                                    <span v-html="option"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="tm.tx==='Jiandati'">
                                <div class="list-group-item list-group-item-action" v-for="(option,optionIndex) in tm.optionsAnswer">
                                    <div class="d-flex justify-content-start align-items-start">
                                        <div class="me-1">
                                            <i class="el-icon-user me-2"></i>
                                        </div>
                                        <div>
                                            <span v-html="option"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-if="tm.tx==='DanxuantiErwei' || tm.tx==='DuoxuantiErwei' || tm.tx==='DanxuantiSanwei' || tm.tx==='DuoxuantiSanwei'">
                                <table class="table table-bordered">
                                    <tr v-for="(small,smallIndex) in tm.smallList">
                                        <td v-for="smallV in small">
                                            <span>{{ smallV }}</span>
                                        </td>
                                    </tr>
                                </table>
                                <div class="py-2">
                                    <apexchart type="bar" :options="tm.chartOptions" :series="tm.chatSeries" :height="(tm.tx==='DanxuantiSanwei' || tm.tx==='DuoxuantiSanwei') ? 400 : 200"></apexchart>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</div>
@section Scripts{
    <script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/admin/exam/examQuestionnaireAnalysis.js" type="text/javascript"></script>
}